/**
 * Created by GanJc on 2015/9/10.
 */

'use strict';

var canvas = document.getElementById('test-canvas');
if (canvas.getContext) {
    console.log('你的浏览器支持Canvas!');
} else {
    console.log('你的浏览器不支持Canvas!');
}

var ctx = canvas.getContext('2d');
console.log(ctx);
//3D的画板  和2d的不能共存
//var gl = canvas.getContext("webgl");
//console.log(gl);

ctx.clearRect(0, 0, 200, 200); // 擦除(0,0)位置大小为200x200的矩形，擦除的意思是把该区域变为透明
ctx.fillStyle = 'red'; // 设置颜色
ctx.fillRect(10, 10, 130, 130); // 把(10,10)位置大小为130x130的矩形涂色
// 利用Path绘制复杂路径

// 利用Path绘制复杂路径:
var path=new Path2D();
path.arc(75, 75, 50, 0, Math.PI*2, true);
path.moveTo(110,75);
path.arc(75, 75, 35, 0, Math.PI, false);
path.moveTo(65, 65);
path.arc(60, 65, 5, 0, Math.PI*2, true);
path.moveTo(95, 65);
path.arc(90, 65, 5, 0, Math.PI*2, true);
ctx.strokeStyle = '#0000ff';
ctx.stroke(path);

var canvas2 = document.getElementById('test-canvas2');
    ctx = canvas2.getContext('2d');
ctx.clearRect(0, 0, canvas.width, canvas.height);
ctx.shadowOffsetX = 2;
ctx.shadowOffsetY = 2;
ctx.shadowBlur = 2;
ctx.shadowColor = '#666666';
ctx.font = '24px Arial';
ctx.fillStyle = '#333333';
ctx.fillText('带阴影的文字', 20, 40);

console.log('jQuery版本：' + $.fn.jquery);
console.log(window.jQuery);// jQuery(selector, context)
console.log(window.$);// jQuery(selector, context)
console.log($ === jQuery);
console.log(typeof($));
$.fn.myLight = function(){
    // this已绑定为当前jQuery对象:
    this.css('backgroundColor', '#fffceb').css('color', '#d85030');
    return this;
};
//支持带参数
$.fn.myLight2 = function (options) {
    // 要考虑到各种情况:
    // options为undefined
    // options只有部分key
    var bgcolor = options && options.backgroundColor || '#fffceb';
    var color = options && options.color || '#d85030';
    this.css('backgroundColor', bgcolor).css('color', color);
    return this;
};

$.fn.myLight3 = function (options) {
    // 合并默认值和用户设定值:
    var opts = $.extend({}, $.fn.myLight3.defaults, options);
    this.css('backgroundColor', opts.backgroundColor).css('color', opts.color);
    return this;
}

// 设定默认值:
$.fn.myLight3.defaults = {
    color: '#d85030',
    backgroundColor: '#fff8de'
}

$.fn.myLight3.defaults.color = '#659f13';
$.fn.myLight3.defaults.backgroundColor = '#f2fae3';

$('#test-highlight3 p:first-child span').myLight3();

$('#test-highlight3 p:last-child span').myLight3({
    color: '#dd1144'
});


$('#test-highlight1 span').myLight3({
    backgroundColor: '#00a8e6',
    color: '#ffffff'
}).hide("slow").show("fast");

$.fn.external = function () {
    // return返回的each()返回结果，支持链式调用:
    return this.filter('a').each(function () {
        // 注意: each()内部的回调函数的this绑定为DOM本身!
        var a = $(this);
        var url = a.attr('href');
        if (url && (url.indexOf('http://')===0 || url.indexOf('https://')===0)) {
            a.attr('href', '#0')
                .removeAttr('target')
                .append(' <i class="uk-icon-external-link"></i>')
                .click(function () {
                    if(confirm('你确定要前往' + url + '？')) {
                        window.open(url);
                    }
                });
        }
    });
}

//现在我们要给所有指向外链的超链接加上跳转提示
$('#test-external a').external();
